﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Hello MUI</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../css/mui.min.css">
    <style>
        html,
        body {
            background-color: #efeff4;
        }

        .mui-bar ~ .mui-content .mui-fullscreen {
            top: 44px;
            height: auto;
        }

        .mui-pull-top-tips {
            position: absolute;
            top: -20px;
            left: 50%;
            margin-left: -25px;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            z-index: 1;
        }

        .mui-bar ~ .mui-pull-top-tips {
            top: 24px;
        }

        .mui-pull-top-wrapper {
            width: 42px;
            height: 42px;
            display: block;
            text-align: center;
            background-color: #efeff4;
            border: 1px solid #ddd;
            border-radius: 25px;
            background-clip: padding-box;
            box-shadow: 0 4px 10px #bbb;
            overflow: hidden;
        }

        .mui-pull-top-tips.mui-transitioning {
            -webkit-transition-duration: 200ms;
            transition-duration: 200ms;
        }

        .mui-pull-top-tips .mui-pull-loading {
            /*-webkit-backface-visibility: hidden;
                -webkit-transition-duration: 400ms;
                transition-duration: 400ms;*/
            margin: 0;
        }

        .mui-pull-top-wrapper .mui-icon,
        .mui-pull-top-wrapper .mui-spinner {
            margin-top: 7px;
        }

            .mui-pull-top-wrapper .mui-icon.mui-reverse {
                /*-webkit-transform: rotate(180deg) translateZ(0);*/
            }

        .mui-pull-bottom-tips {
            text-align: center;
            background-color: #efeff4;
            font-size: 15px;
            line-height: 40px;
            color: #777;
        }

        .mui-pull-top-canvas {
            overflow: hidden;
            background-color: #fafafa;
            border-radius: 40px;
            box-shadow: 0 4px 10px #bbb;
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }

            .mui-pull-top-canvas canvas {
                width: 40px;
            }

        .mui-slider-indicator.mui-segmented-control {
            background-color: #efeff4;
        }

        .mui-segmented-control.mui-scroll-wrapper {
            height: 42px;
        }
        .img-full {
            max-height:600px;
            width:100%;
            vertical-align:middle;
        }
        li .mui-content {
            background:white;
        }
        .mui-table-view .mui-active {
        background-color:white;
        }
        .hr-20 {
            padding:7.5px 0 7.5px 0;
        }
        .mui-slider-item .mui-navigate-left img {
            border-radius:500px;
        }
        .mui-slider-item .mui-navigate-right img {
        border-radius:500px;
        }
        .mui-content .mui-table-view-cell {
           border:none;
           border-bottom:10px solid #efeff4
        }
        .mui-table-view-cell::after {
            height:0px;
        }
        .mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
            border-bottom:2px solid #ff6a00;
        }
        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
            color:black;
        }
        .mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
        color:gray;
        }
    </style>
</head>
<body>
    <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
        <!--侧滑菜单部分-->
        <aside id="offCanvasSide" class="mui-off-canvas-left">
            <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
                <div class="mui-scroll">

                    <div class="title">
                        <img src="../../images/logo.png" width="90">
                    </div>
                    <ul class="mui-table-view mui-table-view-inverted mui-hidden" id="login_ul">
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right" type="login" href="html/barcode_scan.html">
                                登录
                            </a>
                        </li>
                    </ul>

                    <p class="menu-name">话题</p>
                    <ul class="mui-table-view mui-table-view-inverted" id="ul_topics">
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right" type="topic" href="html/list.html" tab="all">
                                最新
                            </a>
                        </li>
                        <li class="mui-table-view-cell">
                            <a class="mui-navigate-right" type="topic" href="html/list.html" tab="good">
                                精华
                            </a>
                        </li>
                    </ul>


                </div>
            </div>
        </aside>
        <!--主界面部分-->
        <div class="mui-inner-wrap" style="background-color:#efeff4">
            <header class="mui-bar mui-bar-nav">
                <a href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
                <h1 class="mui-title">留学圈</h1>
            </header>
            <div id="offCanvasContentScroll" class="mui-content ">


                <div id="slider" class="mui-slider mui-fullscreen">
                    <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
                        <div class="mui-scroll">
                            <a class="mui-control-item mui-active" href="#item1mobile">
                                学吧
                            </a>
                            <a class="mui-control-item" href="#item2mobile">
                                吃喝玩乐
                            </a>
                            <a class="mui-control-item" href="#item3mobile">
                                男神女神
                            </a>
                            <a class="mui-control-item" href="#item4mobile">
                                摄影
                            </a>
                            <a class="mui-control-item" href="#item5mobile">
                                旅行
                            </a>
                            <a class="mui-control-item" href="#item6mobile">
                                运动
                            </a>
                            <a class="mui-control-item" href="#item7mobile">
                                电影
                            </a>
                            <a class="mui-control-item" href="#item8mobile">
                                音乐
                            </a>
                            <a class="mui-control-item" href="#item9mobile">
                                宠物
                            </a>
                            <a class="mui-control-item" href="#item10mobile">
                                电竞
                            </a>
                            <a class="mui-control-item" href="#item11mobile">
                                二次元
                            </a>
                            <a class="mui-control-item" href="#item12mobile">
                                DIY
                            </a>
                            
                        </div>
                    </div>
                    <div class="mui-slider-group" style="padding-bottom:50px;">
                        <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                            <div id="scroll1" class="mui-scroll-wrapper">
                                <div class="mui-scroll">
                                    <ul class="mui-table-view">
                                        <li class="mui-table-view-cell">
                                            <div class="mui-content">
                                                <div class="mui-content-padded">
                                                    
                                                            <img src="../../images/shuijiao.jpg" class="img-full" data-preview-src="" data-preview-group="1" />
                                                    <div class="hr-20"></div>
                                                        <p>“目前全球有 88% 的联网设备是手机，亚太地区用户占到全球用户的 51%。”</p>
                                                        
                                                        <p>国内游戏开发商 Zenjoy 创始人夏锎认为 Google 的优势在其全球性的广告受众，能够帮助内容开发者迅速变现。另一家中国游戏开发商 Umoni Studio 称，Google 插屏广告占到了其收入的 60%。</p>

</div>                      <a>↓展开全文</a>
                                                <br /><br />
                                                <a class='mui-navigate-right' href="javascript:;">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/yuantiao.jpg">
                                                    <div class="mui-media-body">
                                                        远眺
                                                        <p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
                                                    </div>
                                                </a>
                                               
                                                <div class="hr-20" style="border-bottom:1px solid #efeff4"></div>

                                                <div class="mui-navigate-left" style="height:70px;padding:10px 0 10px 0">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a4.png">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a1.png">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a2.png">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a3.png">
                                                </div>
                                               
                                                <div class='mui-navigate-left'>

                                                    <button class="btn btn-default">

                                                        <span class="text">评论</span>

                                                    </button>
                                                    <button class="btn btn-default">

                                                        <span class="text">赞</span>

                                                    </button>
                                                    <button class="btn btn-default">

                                                        <span class="text">收藏</span>

                                                    </button>
                                                   
                                                    
                                                   
                                                   
                                                </div>
                                               
                                                
                                            </div>
                                        </li>
                                        <li class="mui-table-view-cell">
                                            <div class="mui-content">
                                                <div class="mui-content-padded">

                                                <h4>问:国外怎么租车</h4>
                                                    <p>
                                                        答:
                                                        <br>需要注意：<br>
                                                        1.驾龄至少要满1年，部分高级车型需要驾龄满2年<br>
                                                        2.选择车型时，不能仅仅依照自己的喜好，更要根据自己需要，从人数，行李，行驶地形进行全方位考虑，以免增加路途中不必要的麻烦<br>
                                                        3.了解清楚保险条款里包含的项目，如不熟悉当地交通法规，建议选择全保<br>
                                                        4.注意你所选车型是否有公里数限制，以免产生额外费用<br>
                                                        5.如果你选择的是异地还车，是否产生异地还车费，费用是多少<br>
                                                        6.门店是否在营业时间之内，非营业时间如何还车<br>

                                                    </p>

                                                </div>                      <a>↓展开全文</a>
                                                <br /><br />
                                                <a class='mui-navigate-right' href="javascript:;">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/yuantiao.jpg">
                                                    <div class="mui-media-body">
                                                        远眺
                                                        <p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
                                                    </div>
                                                </a>

                                                <div class="hr-20" style="border-bottom:1px solid #efeff4"></div>

                                                <div class="mui-navigate-left" style="height:70px;padding:10px 0 10px 0">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a4.png">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a1.png">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a2.png">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a3.png">
                                                </div>

                                                <div class='mui-navigate-left'>

                                                    <button class="btn btn-default">

                                                        <span class="text">帮Ta解决</span>

                                                    </button>
                                                    <button class="btn btn-default">

                                                        <span class="text">赞</span>

                                                    </button>
                                                    <button class="btn btn-default">

                                                        <span class="text">收藏</span>

                                                    </button>




                                                </div>


                                            </div>
                                        </li>
                                        <li class="mui-table-view-cell">
                                            <div class="mui-content">
                                                <div class="mui-content-padded">
                                               
                                              
                                                    <img src="../../images/c4.jpg" class="img-full" data-preview-src="" data-preview-group="1" />
                                                    <div class="hr-20"></div>
                                                    <h4>课业一对一辅导</h4>

                                                    <p>周六 05/14 14:00 | 北京奥林匹克公园</p>

                                                    <p>5人以内  | 剩余1天</p>

                                                </div>                      <a>↓展开全文</a>
                                                <br /><br />
                                                <a class='mui-navigate-right' href="javascript:;">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/yuantiao.jpg">
                                                    <div class="mui-media-body">
                                                        远眺
                                                        <p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
                                                    </div>
                                                </a>

                                                <div class="hr-20" style="border-bottom:1px solid #efeff4"></div>

                                                <div class="mui-navigate-left" style="height:70px;padding:10px 0 10px 0">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a4.png">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a1.png">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a2.png">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a3.png">
                                                </div>

                                                <div class='mui-navigate-left'>

                                                    <button class="btn btn-default">

                                                        <span class="text">报名参加</span>

                                                    </button>
                                                    <button class="btn btn-default">

                                                        <span class="text">赞</span>

                                                    </button>
                                                    <button class="btn btn-default">

                                                        <span class="text">收藏</span>

                                                    </button>




                                                </div>


                                            </div>
                                        </li>
                                        <li class="mui-table-view-cell">
                                            <div class="mui-content">
                                                <div class="mui-content-padded">


                                                    <img src="../../images/c4.jpg" class="img-full" data-preview-src="" data-preview-group="1" />
                                                    <div class="hr-20"></div>
                                                    <h4>课业一对一辅导</h4>
                                                    <p>周六 05/14 14:00 | 北京奥林匹克公园</p>
                                                    <p>5人以内  | 剩余1天</p>
                                                </div>                      <a>↓展开全文</a>
                                                <br /><br />
                                                <a class='mui-navigate-right' href="javascript:;">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/yuantiao.jpg">
                                                    <div class="mui-media-body">
                                                        远眺
                                                        <p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
                                                    </div>
                                                </a>
                                                <div class="hr-20" style="border-bottom:1px solid #efeff4"></div>
                                                <div class="mui-navigate-left" style="height:70px;padding:10px 0 10px 0">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a4.png">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a1.png">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a2.png">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a3.png">
                                                </div>
                                                <div class='mui-navigate-left'>
                                                    <button class="btn btn-default">
                                                        <span class="text">报名参加</span>
                                                    </button>
                                                    <button class="btn btn-default">
                                                        <span class="text">赞</span>
                                                    </button>
                                                    <button class="btn btn-default">
                                                        <span class="text">收藏</span>
                                                    </button>


                                                </div>

                                            </div>
                                        </li>
                                        <li class="mui-table-view-cell">
                                            <div class="mui-content">
                                                <div class="mui-content-padded">


                                                    <img src="../../images/c4.jpg" class="img-full" data-preview-src="" data-preview-group="1" />
                                                    <div class="hr-20"></div>
                                                    <h4>课业一对一辅导</h4>
                                                    <p>周六 05/14 14:00 | 北京奥林匹克公园</p>
                                                    <p>5人以内  | 剩余1天</p>
                                                </div>                      <a>↓展开全文</a>
                                                <br /><br />
                                                <a class='mui-navigate-right' href="javascript:;">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/yuantiao.jpg">
                                                    <div class="mui-media-body">
                                                        远眺
                                                        <p class='mui-ellipsis'>静静的看这个世界，最后终于疯了</p>
                                                    </div>
                                                </a>
                                                <div class="hr-20" style="border-bottom:1px solid #efeff4"></div>
                                                <div class="mui-navigate-left" style="height:70px;padding:10px 0 10px 0">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a4.png">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a1.png">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a2.png">
                                                    <img class="mui-media-object mui-pull-left" src="../../images/a3.png">
                                                </div>
                                                <div class='mui-navigate-left'>
                                                    <button class="btn btn-default">
                                                        <span class="text">报名参加</span>
                                                    </button>
                                                    <button class="btn btn-default">
                                                        <span class="text">赞</span>
                                                    </button>
                                                    <button class="btn btn-default">
                                                        <span class="text">收藏</span>
                                                    </button>


                                                </div>

                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="item2mobile" class="mui-slider-item mui-control-content">
                            <div class="mui-scroll-wrapper">
                                <div class="mui-scroll">
                                    <ul class="mui-table-view">
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-1
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-2
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-3
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-4
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-5
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-6
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-7
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-8
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-9
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-10
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-11
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-12
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-13
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-14
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-15
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-16
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-17
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-18
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-19
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第2个选项卡子项-20
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="item3mobile" class="mui-slider-item mui-control-content">
                            <div class="mui-scroll-wrapper">
                                <div class="mui-scroll">
                                    <ul class="mui-table-view">
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-1
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-2
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-3
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-4
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-5
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-6
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-7
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-8
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-9
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-10
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-11
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-12
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-13
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-14
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-15
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-16
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-17
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-18
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-19
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第3个选项卡子项-20
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="item4mobile" class="mui-slider-item mui-control-content">
                            <div class="mui-scroll-wrapper">
                                <div class="mui-scroll">
                                    <ul class="mui-table-view">
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-1
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-2
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-3
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-4
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-5
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-6
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-7
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-8
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-9
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-10
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-11
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-12
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-13
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-14
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-15
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-16
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-17
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-18
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-19
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第4个选项卡子项-20
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="item5mobile" class="mui-slider-item mui-control-content">
                            <div class="mui-scroll-wrapper">
                                <div class="mui-scroll">
                                    <ul class="mui-table-view">
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-1
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-2
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-3
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-4
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-5
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-6
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-7
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-8
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-9
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-10
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-11
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-12
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-13
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-14
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-15
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-16
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-17
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-18
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-19
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第5个选项卡子项-20
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div id="item6mobile" class="mui-slider-item mui-control-content">
                            <div class="mui-scroll-wrapper">
                                <div class="mui-scroll">
                                    <ul class="mui-table-view">
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-1
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-2
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-3
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-4
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-5
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-6
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-7
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-8
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-9
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-10
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-11
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-12
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-13
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-14
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-15
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-16
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-17
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-18
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-19
                                        </li>
                                        <li class="mui-table-view-cell">
                                            第6个选项卡子项-20
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>



            </div>
            <!-- off-canvas backdrop -->
            <div class="mui-off-canvas-backdrop"></div>


            <div id="nav" class="mui-bar mui-bar-tab">
                <div id="tb-0" class="mui-tab-item">
                    <span class="mui-icon mui-icon-email hy-icon"></span>
                    <span class="mui-tab-label">最近使用</span>
                </div>
                <div id="tb-1" class="mui-tab-item mui-active" href="#tabbar-with-chat">
                    <span class="mui-icon mui-icon-home hy-icon"><span class="mui-badge">9</span></span>

                    <span class="mui-tab-label">留学圈</span>
                </div>
                <div id="tb-2" class="mui-tab-item" href="#tabbar-with-contact">
                    <span class="mui-icon mui-icon-contact hy-icon"></span>
                    <span class="mui-tab-label">留学生活</span>
                </div>
                <div id="tb-3" class="mui-tab-item" href="#tabbar-with-map">
                    <span class="mui-icon mui-icon-gear hy-icon"></span>
                    <span class="mui-tab-label">个人中心</span>
                </div>
            </div>

        </div>
    </div>


    <script src="../../js/mui.min.js"></script>
    <script src="../../js/mui.pullToRefresh.js"></script>
    <script src="../../js/mui.pullToRefresh.material.js"></script>

    <script src="../../bower_components/jquery/dist/jquery.min.js"></script>
    <script>

        var tb0 = document.getElementById("tb-0");
        var tb1 = document.getElementById("tb-1");
        var tb2 = document.getElementById("tb-2");
        var tb3 = document.getElementById("tb-3");
        //监听点击事件
        tb0.addEventListener("tap", function () {
            location.href = '../chat/_chat.html';
        });
        tb1.addEventListener("tap", function () {
            location.href = '../link/_link.html';
        });
        tb2.addEventListener("tap", function () {
            location.href = '../oversea/_oversea.html';
        });
        tb3.addEventListener("tap", function () {
            location.href = '../person/_person.html';
        });

      

    </script>




    <script>
        mui.init();
        //侧滑容器父节点
        var offCanvasWrapper = mui('#offCanvasWrapper');
        //主界面容器
        var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
        //菜单容器
        var offCanvasSide = document.getElementById("offCanvasSide");

        //移动效果是否为整体移动
        var moveTogether = false;
        //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
        var classList = offCanvasWrapper[0].classList;
        //变换侧滑动画移动效果；
        classList.add('mui-scalable');


        //主界面和侧滑菜单界面均支持区域滚动；
        mui('#offCanvasSideScroll').scroll();
        mui('#offCanvasContentScroll').scroll();


        //实现ios平台原生侧滑关闭页面；
        if (mui.os.plus && mui.os.ios) {
            mui.plusReady(function () { //5+ iOS暂时无法屏蔽popGesture时传递touch事件，故该demo直接屏蔽popGesture功能
                plus.webview.currentWebview().setStyle({
                    'popGesture': 'none'
                });
            });
        }
        (function ($) {
            //阻尼系数
            var deceleration = mui.os.ios ? 0.003 : 0.0009;
            $('.mui-scroll-wrapper').scroll({
                bounce: false,
                indicators: true, //是否显示滚动条
                deceleration: deceleration
            });
            $.ready(function () {

                //循环初始化所有下拉刷新，上拉加载。
                $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function (index, pullRefreshEl) {
                    $(pullRefreshEl).pullToRefresh({
                        down: {
                            callback: function () {
                                var self = this;
                                setTimeout(function () {
                                    var ul = self.element.querySelector('.mui-table-view');
                                    ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);
                                    self.endPullDownToRefresh();
                                }, 1000);
                            }
                        },
                        up: {
                            callback: function () {
                                var self = this;
                                setTimeout(function () {
                                    var ul = self.element.querySelector('.mui-table-view');
                                    ul.appendChild(createFragment(ul, index, 5));
                                    self.endPullUpToRefresh();
                                }, 1000);
                            }
                        }
                    });
                });
                var createFragment = function (ul, index, count, reverse) {
                    var length = ul.querySelectorAll('li').length;
                    var fragment = document.createDocumentFragment();
                    var li;
                    for (var i = 0; i < count; i++) {
                        li = document.createElement('li');
                        li.className = 'mui-table-view-cell';
                        li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
                        fragment.appendChild(li);
                    }
                    return fragment;
                };
            });
        })(mui);

        //document.getElementById("offCanvasContentScroll").addEventListener('swipedown', function (e) {
           

        //});


    </script>
</body>
</html>